<template>
	<view class="fl-s-c nav-pt">
		<image src="/static/images/user/bg284.png" class="common_bg"></image>
		<!-- 自定义导航栏 -->
		<view class="w-1"
			style="background-color: #FFFFFF; position: fixed; left: 0; top: 0; z-index: 99; overflow: hidden;">
			<!-- <view class="status_bar"></view> -->
            <u-navbar title="推荐中心" :border-bottom="false" :background="{background:'transparent'}">
                <view class="slot-wrap fs-26 c-00 fm-ali" @click="clickRight" style="padding-right: 32rpx;"  slot="right" >邀请规则</view>
            </u-navbar>
			<image src="/static/images/user/bg284.png" class="w-1 absolute-0" style="height: 284rpx;"></image>
		</view>
		<!-- 内容部分 -->
		<view class="w-1 fl-s-s p-r-30 m-t-20" v-if="info">
			<!-- 头像 -->
			<view class="fr-s-c w-1">
				<image :src="info.avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx;"
					class="circle m-r-20"></image>
				<view class="flex-1 fl-c-s">
					<text class="fs-36 fm-ali">{{info.nickname}}</text>
					<text class="fs-24 fm-ali" style="margin-top: 5rpx;" >直属上级：{{info.parent.nickname}}</text>
				</view>
			</view>
			<!-- 横线 -->
			<u-line color="#F4F4F4" length="100%" style="margin-top: 40rpx;"></u-line>
			<view class="money-box w-1 fr-b-c">
				<view class="fl-s-s">
					<text class="fm-ali" style="color: #FA360A; font-size: 56rpx;">{{info.fx_allmoney}}</text>
					<text class="fm-ali" style="color: #666666; font-size: 24rpx;">可提现金额</text>
				</view>
				<navigator class="fr-c tx-btn" url="/pages/UserCenter/RecommendationCenter/CommissionWithdrawal/CommissionWithdrawal">提现</navigator>
			</view>
			<!-- 菜单 -->
			<navigator url="/pages/UserCenter/RecommendationCenter/MySubordinates/MySubordinates" class="w-1 menu-item fr-s-c">我的下级</navigator>
			<navigator url="/pages/UserCenter/RecommendationCenter/InvitationIncome/InvitationIncome" class="w-1 menu-item fr-s-c">邀请收益</navigator>
			<!-- @click="inviteShow=true" -->
			<view class="w-1 menu-item fr-b-c" @click="copy" >
				<text>我的邀请码</text>
				<view class="fr-s-c">
					<text style="color: #666666;" class="fs-28 fm-ali">{{info.invitation_code}}</text>
					<image src="/static/images/user/share_code.png" class="m-l-20" style="width: 40rpx; height: 40rpx;">
					</image>
				</view>
			</view>
		</view>
		<!-- 邀请规则 -->
		<u-popup bgColor="transparent" border-radius="32" v-model="show" mode="center">
			<view class="fl-b-c relative"
				style="padding: 64rpx 0rpx 0rpx 0rpx; width: 624rpx; height: 974rpx; background: #FFFFFF; border-radius: 32rpx;">
				<text class="bold fs-42" style="color: #000000;">邀请规则</text>
				<image @click="show = false" src="/static/images/user/close_pup.png" style="position: absolute; right: 36rpx; top: 36rpx; width: 29rpx; height: 29rpx;"></image>
				<scroll-view scroll-y class="w-1"
					style="height: 700rpx; margin-top: 48rpx; padding: 0 36rpx 50rpx 36rpx;">
					<u-parse class="w-1 fs-26" :html="content"></u-parse>
				</scroll-view>
				<view class="w-1 fr-b-c">
					<view class="fr-c argee-btn w-1" @click="readed">
						<text>已阅读</text>
						<view class="fr-s-c m-l-20" v-if="countShow">
            (<u-count-to :start-val="10" :end-val="0" :duration="10000" :use-easing="false" color="#ffffff" font-size="32" @end="countShow = false"></u-count-to>s)
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 邀请弹窗 -->
			<!-- <u-mask :show="inviteShow" @click="inviteShow = false" class="fl-c" :custom-style="{background:'rgba(102, 102, 102, 0.4)'}">
					<Invite :inviteCode="info.invitation_code" @closePup="inviteShow=false"></Invite>
			</u-mask> -->
	</view>
</template>

<script>
	// import Invite from '@/components/InvitePup/InvitePup'
	export default {
		data() {
			return {
				leftText: '收益中心',
				show: false,
				content: ``,
				countShow:true,
				inviteShow:false,
				info:null
			}
		},
		// components: {
		// 		 Invite
		//  },
		 onLoad() {
		 	this.getInfo()
			this.getRule()
		 },
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.info.invitation_code
				})
			},
			// 用户信息
			getInfo(){
				this.$get({
						url:'/appuser/recommend',
						data:{
							access_token:uni.getStorageSync('access_token')
						}
					}).then(res=>{
						this.info = res.user
					})
			},
			// 邀请规则
			getRule(){
				this.$get({
					url:'/appuser/content'
				}).then(res=>{
					this.content = res.data[0].invitation_rules
				})
			},
			clickRight(){
				this.countShow=true
				this.show = true
			},
			readed(){
				if(!this.countShow){
					this.show = false
				}
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.common_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 284rpx;
	}

	.money-box {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F4F4F4;
	}

	.tx-btn {
		width: 152rpx;
		height: 80rpx;
		background: #FA360A;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
	}

	.menu-item {
		border-bottom: 2rpx solid #F4F4F4;
		height: 96rpx;
		color: #000000;
		font-size: 28rpx;
		font-family: Alibaba;
	}
	
	.argee-btn{
		height: 100rpx;
		background: #FA360A;
		border-radius: 0rpx 0rpx 32rpx 32rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
	}
	>>>.u-count-num span{
		font-size: 32rpx!important;
		font-family: Alibaba!important;
		color: #FFFFFF!important;
	}

</style>
